<template>
  <div class="slide-verify">
    <div class="slide-verify-block" :class="{ success: isPass }">
      <div class="slide-verify-track" ref="trackRef">
        <span class="slide-verify-text" :class="{ success: isPass }">
          {{ isPass ? "验证通过" : "向右滑动验证" }}
        </span>
        <div
          class="slide-verify-slider"
          ref="sliderRef"
          @mousedown="handleDragStart"
          @touchstart="handleDragStart"
          :style="{ transform: `translateX(${sliderLeft}px)` }"
          :class="{ success: isPass }">
          <el-icon><DArrowRight /></el-icon>
        </div>
        <div
          class="slide-verify-progress"
          :style="{ width: `${sliderLeft + 40}px` }"
          :class="{ success: isPass }"></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import { DArrowRight } from "@element-plus/icons-vue";

const emit = defineEmits(["verify-success", "verify-reset"]);

const trackRef = ref(null);
const sliderRef = ref(null);
const sliderLeft = ref(0);
const isPass = ref(false);
const startX = ref(0);
const trackWidth = ref(0);
const isDragging = ref(false);

// 处理拖动开始
const handleDragStart = (e) => {
  if (isPass.value) return;
  isDragging.value = true;
  startX.value = e.type === "touchstart" ? e.touches[0].clientX : e.clientX;

  // 计算滑块可移动的最大距离
  const sliderWidth = sliderRef.value.offsetWidth;
  trackWidth.value = trackRef.value.offsetWidth - sliderWidth;

  // 添加事件监听
  document.addEventListener("mousemove", handleDragging);
  document.addEventListener("touchmove", handleDragging);
  document.addEventListener("mouseup", handleDragEnd);
  document.addEventListener("touchend", handleDragEnd);
};

// 处理拖动过程
const handleDragging = (e) => {
  if (!isDragging.value) return;
  e.preventDefault();

  const currentX = e.type === "touchmove" ? e.touches[0].clientX : e.clientX;
  const moveX = currentX - startX.value;

  // 限制滑块移动范围
  if (moveX < 0) {
    sliderLeft.value = 0;
  } else if (moveX > trackWidth.value) {
    sliderLeft.value = trackWidth.value;
  } else {
    sliderLeft.value = moveX;
  }
};

// 处理拖动结束
const handleDragEnd = () => {
  if (!isDragging.value) return;
  isDragging.value = false;

  // 移除事件监听
  document.removeEventListener("mousemove", handleDragging);
  document.removeEventListener("touchmove", handleDragging);
  document.removeEventListener("mouseup", handleDragEnd);
  document.removeEventListener("touchend", handleDragEnd);

  // 判断是否验证成功
  if (sliderLeft.value >= trackWidth.value - 2) {
    isPass.value = true;
    emit("verify-success");
  } else {
    sliderLeft.value = 0;
    emit("verify-reset");
  }
};

// 提供重置方法
const reset = () => {
  isPass.value = false;
  sliderLeft.value = 0;
};

// 组件卸载时清理事件监听
onUnmounted(() => {
  document.removeEventListener("mousemove", handleDragging);
  document.removeEventListener("touchmove", handleDragging);
  document.removeEventListener("mouseup", handleDragEnd);
  document.removeEventListener("touchend", handleDragEnd);
});

defineExpose({ reset });
</script>

<style scoped>
.slide-verify {
  margin: 16px 0;
}

.slide-verify-block {
  position: relative;
  width: 100%;
  height: 40px;
  background: #f5f5f5;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  overflow: hidden;
}

.slide-verify-block.success {
  border-color: #67c23a;
}

.slide-verify-track {
  position: relative;
  height: 100%;
  touch-action: none;
}

.slide-verify-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 14px;
  color: #999;
  user-select: none;
  z-index: 2;
  transition: color 0.3s;
}

.slide-verify-text.success {
  color: #67c23a;
}

.slide-verify-slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 100%;
  background: #fff;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: transform 0.1s;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  z-index: 2;
  user-select: none;
}

.slide-verify-slider:hover {
  background: #1890ff;
  color: #fff;
}

.slide-verify-slider.success {
  background: #67c23a;
  color: #fff;
  cursor: default;
}

.slide-verify-progress {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: #e1f3ff;
  transition: width 0.1s;
  z-index: 1;
}

.slide-verify-progress.success {
  background: #f0f9eb;
}
</style>
